<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }

    .col {
      display: inline-block;
      padding: 10px 0;
    }

    @media print {
      body * {
        visibility: hidden;
      }

      .print-visibility,
      .print-visibility * {
        visibility: visible;
      }
    }
  </style>
</head>

<body>

  <div id="app" class="print-visibility"></div>
  <button id="printButton" onclick="window.print();">打印当前页面</button>

  <script>
    function generPaper(layoutStr, json) {
      let html = '<div class="main">';
      // 解析显示规则  
      let fields = layoutStr.split('-');
      let regex = /\[([^\[\]]+)\]/g;
      let index = 0; // 用于跟踪当前处理的JSON字段索引  
      function createDIVTag(index, width) {
        if (index < Object.keys(json).length) {
          // 假设json对象的键是我们要显示的字段名（简化处理）  
          let fieldName = Object.keys(json)[index];
          let fieldValue = json[fieldName];
          // 这里我们假设技能列表需要特殊处理（比如遍历并显示每项技能）  
          if (Array.isArray(fieldValue)) {
            fieldValue = fieldValue.reduce((a, b) => a + b + '、', '').slice(0, -1)
          }
          html += `<div class="col" style="width:${width * 100}%;">${fieldName}: ${fieldValue}</div>`;
          index++;
        }
      }
      // 遍历规则字段  
      for (let j in fields) {
        html += '<div class="row">'
        if (fields[j] === '') {
          createDIVTag(index, 1)
          index++
        } else {
          if (fields[j - 1] !== '') {
            createDIVTag(index, 1)
            index++
          }
          let rule = fields[j].replaceAll('[', ']')
          let rules = rule.split(']').filter(Boolean)
          for (let i of rules) {
            let ratios = i.split('|').map(item => Number(item));
            let totalRatio = ratios.reduce((a, b) => a + b);
            for (let ratio of ratios) {
              createDIVTag(index, ratio / totalRatio)
              index++;
            }
          }

        }
        html += '</div>';
      }
      // 结束HTML内容  
      html += '</div>';
      // 假设我们将HTML内容插入到页面的某个元素中  
      document.getElementById('app').innerHTML = html;
    }
    // 示例使用  
    const jsonResume = {
      "name": "李坤",
      "age": 24,
      "email": "17879373163@139.com",
      "phone": "17879373163",
      "school": "江西农业大学",
      "education": "本科",
      "Expertise": "软件工程专业",
      "skills": ["JavaScript", "Vue", "React", "Node.js"],
    }
    const layout = "-[1|1|1]-[2|1]--";
    generPaper(layout, jsonResume);
  </script>
</body>

</html>